class showImg {
    constructor() {
        this.smallObj = this.getEle('.Nu');
        this.maskObj = this.getEle('#mask');
        this.boxObj = this.getEle('.top_pic_big');
        this.bigObj = this.getEle('#hide2');
        this.bigImgObj = this.getEle('#bigImg');
        // console.log(this.bigImgObj);
        this.bindEve();
    }


    // 2 绑定事件
    bindEve() {
        // 2-1 给small绑定鼠标移入事件
        //  mouseenter 移入,不支持冒泡
        this.smallObj.addEventListener('mouseenter', this.overFn.bind(this));
        // mouseleave   移出,不支持冒泡
        this.smallObj.addEventListener('mouseleave', this.outFn.bind(this));
        // 2-2  给small绑定鼠标移动事件,让小黄块,跟随鼠标移动
        this.smallObj.addEventListener('mousemove', this.moveFn.bind(this))
    }


    //3 鼠标移入的回调函数
    overFn() {
            // console.log(this, 11);
            // 3-1 显示小黄快
            this.maskObj.style.display = 'block';

            // 3-2 显示大图的div
            this.bigObj.style.display = 'block';


        }
        //4 鼠标移出
    outFn() {
        // console.log(this, 22);
        // 4-1 移走隐藏小黄块
        this.maskObj.style.display = 'none';
        // 4-2 隐藏大图的div
        this.bigObj.style.display = 'none';

    }

    //5 鼠标移动
    moveFn(eve) {
        // console.log(eve);
        // 5-1 获取鼠标相对于文档的坐标
        let px = eve.pageX;
        let py = eve.pageY;
        // 5-2 获取box的坐标,获取mask自身的宽和高
        let boxL = this.boxObj.offsetLeft;
        let boxT = this.boxObj.offsetTop;
        // console.log(boxL, boxT);
        let mW = this.maskObj.offsetWidth;
        let mH = this.maskObj.offsetHeight;
        // 获取small的高度和宽度
        let sW = this.smallObj.offsetWidth;
        let sH = this.smallObj.offsetHeight;

        // 5-3 计算小黄块的位置
        let tx = px - boxL - mW / 2;
        let ty = py - boxT - mH / 2;
        // console.log(sX, sY);
        // 5-4 边界值的设置
        if (tx < 0) tx = 0;
        if (ty < 0) ty = 0;

        //判断是否超出右边和下边
        if (tx > (sW - mW)) tx = sW - mW;
        if (ty > (sH - mH)) ty = sH - mH;

        //5-5 设置小黄块的实时坐标,跟随鼠标移动
        this.maskObj.style.left = tx + 'px';
        this.maskObj.style.top = ty + 'px';
        //5-6 计算大图在div中移动的最大left和ttop
        let bml = this.bigImgObj.offsetWidth - this.bigObj.offsetWidth;
        let bmt = this.bigImgObj.offsetHeight - this.bigObj.offsetHeight;

        // 5-7 计算大图移动的left和top值
        //黄色盒子覆盖到哪里,对应的大盒子里图片展示哪里
        //  mask移动的距离 / mask移动的最大距离 == img移动的距离 / img移动的最大距离
        //img移动的距离 = mask移动的距离 / mask移动的最大距离 * img移动的最大距离
        let bigMoveLeft = tx / (sW - mW) * bml;
        let bigMoveTop = ty / (sH - mH) * bmt;

        // 设置给大图即可
        this.bigImgObj.style.left = -bigMoveLeft + 'px';
        this.bigImgObj.style.top = -bigMoveTop + 'px';

    }


    // 获取节点方法
    getEle(tag) {
        return document.querySelector(tag)
    }

}



new showImg;



var userMsg = localStorage.getItem("userMsg") ? JSON.parse(localStorage.getItem("userMsg")) : {};

if (localStorage.getItem("userMsg")) {
    if ((userMsg.msg).isLogin === "ok") {
        $("#hide").hide()
        $("#same").show()
        $("#newname").html((userMsg.msg).username)
    } else {
        $("#hide").show()
        $("#same").hide()
    }
}
$("#dc").click(function() {
    localStorage.removeItem("userMsg");
    location.reload()
    $("#dc").hide()
})



// 点击事件
let btnGM = document.querySelector(".btn_two");
let num = document.querySelector("#numberbox");
console.log(num);
btnGM.onclick = function() {
    console.log(111);
    if (localStorage.getItem("userMsg")) {


        if ((userMsg.msg).isLogin === "ok") {
            console.log(proData[i].proId);

            //当前的页面的id
            // console.log(location.search.split("=")[1]);

            // 存入数据
            // localStorage.setItem("parData", JSON.stringify([{ "id": proData[i].proId, "num": num.value }]))

            // 判断读取数据
            const arr = localStorage.getItem('parData') ? JSON.parse(localStorage.getItem('parData')) : [];
            console.log(arr);
            console.log(localStorage.getItem('parData')); //parData是key,打印的是value值

            if (arr.length > 0) {
                let i = 0;
                const onoff = arr.some((val, idx) => {
                    i = idx
                    return val.id == location.search.split("=")[1]
                })
                if (onoff) {
                    arr[i].num++;
                    alert("已经成功添加到购物车")
                } else {
                    arr.push({ "id": location.search.split("=")[1], "num": num.value })
                }

            } else {
                // console.log(111);
                //第一次加入购物车
                arr.push({ "id": location.search.split("=")[1], "num": num.value })
            }
            localStorage.setItem('parData', JSON.stringify(arr))
        }
    } else {
        if (confirm("需否需要进入登录登录页面")) {
            location.href = "http://localhost/www/login.html";
        }

    }
}